<template>
  <a-modal :title="title" :width="width" :visible="visible" @ok="handleCancel"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
    <BasicTable @register="registerTable" :loading="loading" :pagination="{ pageSize: 20 }">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </a-modal>

  <TableModal @register="registerItemsModal"></TableModal>
</template>

<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import { useListPage } from '/@/hooks/system/useListPage';
import { itemList } from '../LabWscientificBook.api';
import { columnsRecord } from '../LabWscientificBook.data';
import { BasicTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import TableModal from '../../items_check/LabCheckItemsFrom.vue';

const loading = ref(false);
const title = ref<string>('');
const width = ref<number>(1000);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const emit = defineEmits(['register', 'success']);
const props = defineProps({ kyId: { type: String } })
let queryParam = {}
// 注册table数据
const { tableContext } = useListPage({
  tableProps: {
    api: itemList,
    columns: columnsRecord,
    canResize: false,
    useSearchForm: false,
    showIndexColumn: true,
    showTableSetting: false,
    showActionColumn: true,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    },
  },
});

const [registerTable, { reload }] = tableContext;

const [registerItemsModal, { openModal }] = useModal();
/**
 * 编辑
 * @param record
 */
function openModel(record) {
  title.value = '实验记录';
  visible.value = true;
  queryParam = record;
  nextTick(() => {
    reload();
  });
}
/**
 * 取消按钮回调事件
 */
function handleCancel() {
  visible.value = false;
}

function handleItemRecords(record) {
  openModal(true, {
    record,
    disabled: true,
  });
}


function getTableAction(record) {
  return [
    {
      label: '实验记录',
      onClick: handleItemRecords.bind(null, record),
    },
  ];
}

const reloadTable = (devId) => {
  queryParam.devId = devId;
  reload();
}

defineExpose({
  openModel,
  reload,
});
</script>

<style>
/**隐藏样式-modal确定按钮 */
.jee-hidden {
  display: none !important;
}
</style>
